<template>
  <div class="questionnaire">
    <router-link to="/">Home</router-link>
    <section>
      <h4 class="text-center">{{questionnaire.name}}</h4>
      <article>
        {{questionnaire.introduce}}
      </article>
    </section>
    <div class="question-list">
      <question-list :questions="questionnaire.questions"></question-list>
    </div>
    <div class="submit">
      <button class="btn" @click="submit">提交</button>
    </div>
  </div>
</template>

<style>
  .questionnaire {
    width: 1100px;
    padding: 0 50px;
    margin: 50px auto;
    background: #fff;
  }
  .text-center {
    text-align: center;
  }
  section {
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
  }
  article {
    color: #999;
  }
  .btn {
    line-height: 32px;
    padding: 0 16px;
    border-radius: 2px;
  }
</style>

<script>
  import questionList from '@/questionList.vue'

  export default {
    data () {
      return {

      }
    },
    computed: {
      questionnaire () {
        return this.$store.state.data
      }
    },
    methods: {
      //  提交显示答案
      submit () {
        this.$store.commit('submit')
      }
    },
    components: {
      questionList
    }
  }
</script>